<template>
  <div class="charts" ref="charts"></div>
</template>

<script>
import* as  echarts from 'echarts'
import {mapState} from "vuex";

export default {
  name: "LineChart",
  data(){
    return{
      Linecharts:null
    }
  },
  mounted() {
    this.Linecharts = echarts.init(this.$refs.charts)
    //配置options
    let option = {
      xAxis:{
        show:false,
        type: 'category',
      },
      yAxis:{
        show:false
      },
      tooltip: {},
      series:{
        type:'line',

        //隐藏拐点
        itemStyle:{
          opacity:0
        },
        //线条样式
        lineStyle:{
          color:'purple'
        },
        //区域填充样式
        areaStyle:{
          color:{
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: 'purple' // 0% 处的颜色
            }, {
              offset: 1, color: '#fff' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          }
        }
      },
      //布局调试
      grid:{
        left:0,
        top:0,
        right:0,
        bottom:0
      }
    }
    this.Linecharts.setOption(option)
  },
  computed:{
    ...mapState({
      visitTrend:state => state.home.SaleData
    })
  },
  watch:{
    visitTrend(){
      this.Linecharts.setOption({
        series:{
          data:this.visitTrend.visitTrend
        }
      })
    }
  }
}
</script>

<style scoped>
  .charts{
    width: 100%;
    height: 100%;
  }
</style>
